<template>
    <div class="index-container">
        <div class="alumni-news clear">
            <!-- 轮播图信息 -->
            <div class="left-news fl">
                <el-carousel height="450px" :interval="5000" vtrigger="click">
                    <el-carousel-item v-if="bannerList!=0" v-for="(item,key) in bannerList" :key="key">
                        <router-link :to="{path:'/alumni/details',query:{id:item.id,type:item.type}}" class="banner" :style="{'background-image':item.pic?'url(' + BASE_URL+item.pic + ')':'url(' + require('../../../assets/images/image01.png') + ')'}" tag="div">
                            <div class="cover">
                                <span>{{item.title}}</span>
                            </div>
                        </router-link>
                    </el-carousel-item>
                    <el-carousel-item v-if="bannerList==0" >
                        <div class="banner empty" >
                            <span>暂时没有新闻数据</span>
                        </div>
                    </el-carousel-item>
                </el-carousel>
            </div>

            <!-- 新闻资讯信息 -->
            <div class="right_news fr">
                <router-link to="/alumni/news" class="right_news_top clear" tag="p">
                    <span>新闻资讯</span>
                    <span class="fr">更多&nbsp;&gt;</span>
                </router-link>
                <ul v-if="newsList!=0">
                    <li v-for="(item,key) in newsList" :key="key" :class="{top: item.top == 1 }">
                        <router-link :to="{path:'/alumni/details',query:{id:item.id,type:item.type}}">{{item.title}}</router-link>
                    </li> 
                </ul>
                <div v-else class="empty">还没有最新资讯~</div>
            </div>
        </div>

        <!-- 校友剪影 -->
        <div class="alumni-cucoloris">
            <p class="clear">
                <span class="fl">校友剪影</span>
                <router-link :to="{path:'/alumni/news', query: {type: 'cucoloris'}}" tag="span" class="fr pointer">更多&nbsp;&gt;</router-link>
            </p>
            <div >
                <ul v-if="photograph!=0" class="pohotos clear">
                    <router-link :to="{path:'/alumni/album',query:{id:item.pic_id,path: '1'}}" v-for="(item,key) in photograph" :key="key" class="pointer" :style="{active:item.top}" tag="li">
                        <i><img :src="BASE_URL+item.pic_path" alt="相册封面" /></i>
                        <p>{{item.pic_name}}</p>
                        <div class="clear">
                            <img class="fl" :src="BASE_URL+item.avatar_path" alt="头像图片" />
                            <span class="fl" >{{item.user_name}}</span>
                        </div>
                    </router-link>
                </ul>
                <div v-else class="empty">
                    <p>还没有分享相册哦~</p>
                </div>
            </div>
        </div>     
    </div>
</template>

<script type="text/javascript">
    export default {
        data(){
            return {
                bannerList:[],    // 存放轮播图信息列表
                photograph:[],    // 存放相册的信息列表
                newsList:[],    //存放文章的信息列表
            }
        },
        created(){
            // 获取轮播图信息
            this.getBanners();

            // 获取轮播图信息
            this.getNews();

            // 获取相册信息列表
            this.getPhotos();
        },
        methods:{
            getPhotos(){
                let success = res => {
                    // console.log(res)
                    this.photograph = res.data;
                    // this.getPhotos2()
                }
                this.$ajax({
                    url: "/api/alumni/getHomePositionPic",
                    method: "get",
                    params: {},
                    func: { success: success }
                })
            },
            getPhotos2(){
                let success = res => {
                    console.log(res)
                    // this.photograph = res.data;
                }
                this.$ajax({
                    url: "/api/alumni/pushToHome",
                    method: "get",
                    params: {},
                    func: { success: success }
                })
            },
            getBanners(){
                let success = res => {
                    // console.log(res)
                    this.bannerList = res.data.data;
                }
                this.$ajax({
                    url: "/api/alumni/alumniNews",
                    method: "get",
                    params: {
                        type:1,    // 1：轮播文章；2：普通文章
                        page_index:1,
                        page_size:9,     // 产品要求0-9条
                        data_type:1,    // 0：没有分页 ； 1：有分页
                        order:'top'    // time：创建时间倒序（适用于后台列表）；top：置顶倒序（适用于前台列表）
                    },
                    func: { success: success }
                })
            },
            getNews(){
                let success = res => {
                    // console.log(res)
                    this.newsList = res.data.data;
                }
                this.$ajax({
                    url: "/api/alumni/alumniNews",
                    method: "get",
                    params: {
                        type:2,    // 1：轮播文章；2：普通文章
                        page_index:1,
                        page_size:10,     // 产品要求10条,按UI效果显示
                        data_type:1,    // 0：没有分页 ； 1：有分页
                        order:'top'    // time：创建时间倒序（适用于后台列表）；top：置顶倒序（适用于前台列表）
                    },
                    func: { success: success }
                })
            },
        }
    }
</script>

<style type="text/css" lang="scss">
    #alumni{
        .index-container{
            width:1200px;
            margin:0 auto;
            .alumni-news{
                .left-news{
                    width:800px;
                    height:450px;
                    background: #fff;
                    &:hover{
                        cursor:pointer
                    }
                    .el-carousel.el-carousel--horizontal{
                        .el-carousel__container{
                            .el-carousel__item{
                                .banner{
                                    position:relative;
                                    width:100%;
                                    height:100%;
                                    // background: #ccc;
                                    background-size:cover;
                                    background-position: center center;
                                    .cover{
                                        position:absolute;
                                        top:0;
                                        left:0;
                                        width:100%;
                                        height:100%;
                                        background: linear-gradient(0deg, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.02) 45%);
                                        span{
                                            position:absolute;
                                            bottom:42px;
                                            left:30px;
                                            line-height: 30px;
                                            font-weight: bold;
                                            font-size: 24px;
                                            color: #FFFFFF;
                                            letter-spacing: 0;
                                            text-shadow: 0 2px 0 rgba(0,0,0,0.50);
                                        }
                                    }
                                }
                                .empty{
                                    background-image: linear-gradient(0deg, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.02) 45%),url("../../../assets/images/image01.png");
                                    background-repeat: no-repeat, no-repeat;
                                    background-position: center center, center center;
                                    span{
                                        position:absolute;
                                        bottom:42px;
                                        left:30px;
                                        line-height: 30px;
                                        font-weight: bold;
                                        font-size: 24px;
                                        color: #FFFFFF;
                                        letter-spacing: 0;
                                        text-shadow: 0 2px 0 rgba(0,0,0,0.50);
                                    }
                                }
                            }
                        }
                        .el-carousel__indicators.el-carousel__indicators--horizontal{
                            bottom:17px;
                            left:30px;
                            transform:translate(0,0);
                            .el-carousel__indicator.el-carousel__indicator--horizontal{
                                padding:0 9px 0 0;
                                .el-carousel__button{
                                    width:10px;
                                    height:10px;
                                    border-radius:50%;
                                }
                            }

                        }
                    }
                }
                .right_news{
                    padding:0 20px;
                    width:342px;
                    height:450px;
                    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.10);
                    border-radius: 3px;
                    background: #fff;
                    overflow:hidden;
                    .right_news_top{
                        font-weight:600;
                        height:44px;
                        line-height:44px;
                        border-bottom:1px solid #EFEFEF;
                        span{
                            font-size: 14px;
                            color: #000000;
                            letter-spacing: 0;
                            &:last-child{
                                font-size: 12px;
                                color: #666666;
                            }
                        }
                        &:hover{
                            cursor:pointer;
                        }
                    }
                    &>ul{
                        height: calc(100% - 45px);
                        overflow-x:hidden;
                        li{
                            box-sizing:border-box;
                            width:100%;
                            height:40px;
                            font-size: 14px;
                            color: #333333;
                            letter-spacing: 0;
                            line-height:40px;
                            border-bottom:1px solid #EFEFEF; 
                            overflow: hidden;                    
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            &:last-child{
                                border:0 none;
                            }
                            &.top{
                                font-weight: 900;
                                color: #000000;
                            }
                        }
                    }
                    &>.empty{
                        padding-top:212px;
                        width:100%;
                        text-align:center;
                        font-size: 16px;
                        color: #A2B2BB;
                        letter-spacing: 0;
                        background: url("../../../assets/images/image02.png") center 135px no-repeat;
                    }
                }
            }
            .alumni-cucoloris{
                margin-top:32px;
                margin-bottom:60px;
                overflow:hidden;
                &>p{
                    height:19px;
                    line-height:19px;
                    span{
                        font-size: 14px;
                        color: #000000;
                        letter-spacing: 0;
                        &:last-child{
                            font-size: 12px;
                            color: #666666;
                            margin-right:20px;
                        }
                    }
                }
                &>div{
                    margin-top:20px;
                    height:380px;
                    .pohotos{
                        li{
                            float:left;
                            margin-right:18px;
                            width:286px;
                            height:272px;
                            background: #fff;
                            box-shadow: 0 1px 1px 0 rgba(0,0,0,0.10);
                            border-radius: 3px;
                            overflow:hidden;
                            &>i{
                                display:block;
                                margin:1px;
                                width:285px;
                                height:160px;
                                overflow:hidden;
                                img{
                                    width:100%;
                                    height:100%;
                                    object-fit:cover;
                                }
                            }
                            &>p{
                                margin:22px 14px 0;
                                height:19px;
                                line-height:19px;
                                font-size: 14px;
                                color: #333333;
                                letter-spacing: 0;
                                overflow:hidden;
                                text-overflow:ellipsis;
                                white-space:nowrap;
                            }
                            &>div{
                                margin:13px 13px 0;
                                img{
                                    width:34px;
                                    height:34px;
                                    overflow:hidden;
                                    border-radius:50%;
                                    object-fit:cover;
                                }
                                span{
                                    margin-left:10px;
                                    margin-top:10px;
                                    font-size: 14px;
                                    color: #333333;
                                    letter-spacing: 0;
                                }
                            }
                            &:last-child{
                                margin: 0;
                            }
                        }
                    }
                    .empty{
                        padding-top:306px;
                        width:100%;
                        height:calc(100% - 306px);
                        text-align:center;
                        background: #fff url("../../../assets/images/image03.png") center 68px no-repeat;
                        p{
                            font-size: 16px;
                            color: #A2B2BB;
                            letter-spacing: 0;
                        }
                    }
                }
            }
        }
    }
</style>